<style>
.player-left {
  height: 480px;
  /*border: 1px solid #d7dde4;*/
  /*border-left: 0;*/
  background-color: #464c5b;
  overflow-y: auto;
}

.video-img {
  /*border-radius: 20px;*/
  /*margin-top: -5px;*/
  width: 72px;
  height: 48px;
  /*float: right;*/
}
</style>

<template>
<div>
  <Row>
    <i-col span="20">
      <video-player ref="videoPlayer" :options="videoOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @timeupdate="onPlayerTimeupdate($event)"
        @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied" @statechanged="playerStateChanged($event)">
      </video-player>
    </i-col>
    <i-col span="4" style="height: 100%;">
      <div class="player-left" dis-hover>
        <Menu :active-name="playing" @on-select="handleselect" theme="dark" mode="vertical" style="width: 100%;">
          <Menu-item :name="item.index" v-for="item in playList" :key="item.index" class="ivu-menu-item-v">
            {{item.name}}
            <br>
            <img :src="imgSrc(item.img)" class="video-img">
          </Menu-item>
        </Menu>
      </div>
    </i-col>
  </Row>
  <!--<chat v-if="chat" :roomid="videoOptions.sources[0].name"></chat>-->
</div>
</template>

<script>
import {
  videoPlayer
} from 'vue-video-player'

//  import 'videojs-flash'
//  window.videojs.options.sw
//  console.log(videoPlayer.player)
//  window.videojs.options.flash.swf=SWF_PATH
import {
  V_ROOT
} from '@/api/config'
import api from '@/api'
//  import chat from '../chat/chat.vue'
//  import Chat from '../../api/wsclient'
export default {
  components: {
    videoPlayer,
    //      chat
  },
  data: function() {
    return {
      wtime: null,
      //        canchat: false,
      playing: 0,
      videoOptions: {
        language: 'zh-CN',
        sources: [],
        live: true,
        height: 480,
        //          poster: '',
        autoplay: true,
      },
    }
  },
  props: {
    playList: {
      type: Array,
      default () {
        return []
      }
    },
    isLIve: {
      type: Boolean,
      default () {
        false
      }
    }
  },
  computed: {
    player() {
      //        this.$refs.videoPlayer.player.options.flash.swf=SWF_PATH

      return this.$refs.videoPlayer.player
    },
    getRoom() {
      if (this.isLive) {
        return false
      }
      if (this.playList && this.playList.length > 0) {
        //          this.playing = 0
        return true
      } else {
        return false
      }
    },
    getOptions() {
      return this.videoOptions
    },

  },
  methods: {
    imgSrc(data) {
      return V_ROOT + "/" + data
    },
    handleselect(name) {
      //        Chat.logout()
      if(this.videoOptions.sources[0]){
        this.vidhis() 
      }
      let md = String(name)
      console.log(name)
      this.playing = md
      this.videoOptions.sources = []
      this.videoOptions.sources[0] = this.playList[name]
      console.log(this.player)
      //        this.player.options.flash.swf=SWF_PATH
      this.$api.VideoWatch(this.videoOptions.sources[0])
      //        this.canchat = true
    },
    handleopen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleclose(key, keyPath) {
      // console.log(key, keyPath);
    },

    // listen event
    onPlayerPlay(player) {
      // console.log('player play!', player)
    },
    onPlayerPause(player) {
      this.vidhis() 
    },
    onPlayerEnded(player) {
      // console.log('player ended!', player)
      this.vidhis() 
      let cont = this.playList.length
      let i = Number(this.playing)
      if (i < cont - 1) {
        this.handleselect(i + 1)
      } else {
        this.handleselect(0)
      }
    },
    onPlayerLoadeddata(player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting(player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying(player) {
      this.wtime = new Date()
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate(player) {
      //         console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay(player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough(player) {
      // console.log('player Canplaythrough!', player)
    },
    // or listen state event
    playerStateChanged(playerCurrentState) {
      // console.log('player current update state', playerCurrentState)
    },
    // player is ready
    playerReadied(player) {
      // console.log('example 01: the player is readied', player)
    },
    // 上传观看记录
    vidhis() {
      let ct = new Date()
      let ret = this.videoOptions.sources[0]
      if (this.wtime) {
        ret.times = (ct.getTime() - this.wtime.getTime()) / 1000
        ret.vtype = 2
        //        this.wtime=ct
        // console.log('player pause!', player)
        this.$api.watchhistory(ret)
        console.log('vidhis', this.player)
      }
    }

  },

  mounted() {
    //      this.handleselect(0)
  },

  beforeDestroy() {
    this.vidhis()

    // this.onPlayerPause(this.player)
  },
}
</script>




